<template>
    <div class="sjplatformAdd">
        <el-form label-width="100px">
            <el-form-item label="节点名称：">
                <el-input v-model="flowStore.flowNodeModel.nodeName" />
            </el-form-item>
            <el-form-item label="审批类型：">
                <el-select v-model="flowStore.flowNodeModel.approveType" placeholder="请选择审批类型">
                    <el-option v-for="item in flowNodeTable.nodeOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <template v-if="flowStore.flowNodeModel.approveType == 1">
                <el-form-item label="审批人：">
                    <el-input v-model="flowStore.flowNodeModel.approveUserName" @click="openUserSelectForm(false)"
                        clearable @clear="clearmanager" />
                </el-form-item>
            </template>
            <template v-if="flowStore.flowNodeModel.approveType == 2">
                <el-form-item label="审批角色：">
                    <el-select v-model="flowStore.flowNodeModel.approveRoleName" @update:modelValue="handleRoleChange"
                        placeholder="请选择审批角色">
                        <el-option v-for="item in data" :key="item.id" :label="item.label" :value="item.id" />
                    </el-select>
                </el-form-item>
            </template>
            <el-form-item label="通过条件：">
                <el-select v-model="flowStore.flowNodeModel.passCondition" placeholder="请选择审批类型">
                    <el-option v-for="item in flowNodeTable.passConditions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="节点顺序：">
                <el-input-number :min="1" v-model="flowStore.flowNodeModel.sort" />
            </el-form-item>
            <template v-if="flowStore.flowNodeModel.sort > 1">
                <el-form-item label="前一个节点：">
                    <el-select v-model="flowStore.flowNodeModel.prevNodeId" @update:modelValue="handleNodeChange"
                        placeholder="请选择前一个节点">
                        <el-option v-for="item in nodeData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </template>
        </el-form>
    </div>
    <el-dialog v-model="isOpenUserSelectForm" title="选择审批人" width="50%" draggable :destroy-on-close="true">
        <UserSelect :initSelectedUser="initSelectedUser" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import UserSelect from "../../components/SystemManager/User/UserSelect.vue";
import { useFlowNodeTable } from '../../hooks/FlowManager/useFlowNodeTable';
import { useRoleTree } from "../../hooks/SystemManager/Role/useRoleTree";
import emitter from "../../utils/emitter";

// 角色列表
let { data, fetchData } = useRoleTree();
fetchData(); // 调用数据获取方法

let { flowNodeTable, flowStore, getFlowNode, getFlowNodeApproveUser } =
    useFlowNodeTable();

let nodeData = reactive([]);
//选择节点
getFlowNode(flowStore.flowNodeModel.fid).then(() => {
    if (flowNodeTable.tableData) {
        for (let node of flowNodeTable.tableData) {
            nodeData.push({ value: node.id, label: node.nodeName })
        }
    }
    //当前节点id为空则当做新增节点，sort自动生成
    if (!flowStore.flowNodeModel.id) {
        flowStore.flowNodeModel.sort = nodeData.length + 1;
    }
});
//反显审批人
if (flowStore.flowNodeModel.id && flowStore.flowNodeModel.approveType == 1) {
    getFlowNodeApproveUser(flowStore.flowNodeModel.id).then(() => {
        let approveUserIdSelected = [];
        let approveUserNameSelected = [];
        flowStore.flowNodeModel.approveUserName = '';
        flowStore.flowNodeModel.approveUserId = '';
        for (let item of flowNodeTable.flowNodeApproveUsers) {
            approveUserIdSelected.push(item.approveUserId);
            approveUserNameSelected.push(item.approveUserName);
        }
        approveUserSelected = approveUserIdSelected;
        flowStore.flowNodeModel.approveUserName = approveUserNameSelected.join(',');
        flowStore.flowNodeModel.approveUserId = approveUserIdSelected.join(',');
    })
}

//节点改变
function handleNodeChange(value) {
    const selectedNode = nodeData.find(item => item.value === value);
    if (selectedNode) {
        flowStore.flowNodeModel.prevNodeName = selectedNode.label;
    }
}
//角色改变
function handleRoleChange(roleId) {
    flowStore.flowNodeModel.approveRoleId = roleId;
    flowStore.flowNodeModel.approveRoleName = data.value.find(item => item.id === roleId).label;
}

//选择审批人
let isOpenUserSelectForm = ref(false); //是否打开用户选择窗口
let initSelectedUser = reactive({
    single: false,
    selectedrow: [],
});
let approveUserSelected = [];
function openUserSelectForm(value) {
    initSelectedUser.single = value;
    initSelectedUser.selectedrow = approveUserSelected;
    isOpenUserSelectForm.value = true;
}
//供用户选择调用设置选择的项
emitter.on("set-selected-user", (SelectionRows: any) => {
    let approveUserIdSelected = [];
    let approveUserNameSelected = [];
    flowStore.flowNodeModel.approveUserName = '';
    flowStore.flowNodeModel.approveUserId = '';
    flowStore.flowNodeModel.flowNodeApproveUsers = [];
    for (let item of SelectionRows) {
        approveUserIdSelected.push(item.id);
        approveUserNameSelected.push(item.realName);
        flowStore.flowNodeModel.flowNodeApproveUsers.push({ approveUserId: item.id, approveUserName: item.realName })
    }
    approveUserSelected = approveUserIdSelected;

    flowStore.flowNodeModel.approveUserName = approveUserNameSelected.join(',');
    flowStore.flowNodeModel.approveUserId = approveUserIdSelected.join(',');

    isOpenUserSelectForm.value = false;
});
function clearmanager() {
    flowStore.flowNodeModel.approveUserName = "";
    flowStore.flowNodeModel.approveUserId = "";
    approveUserSelected = [];
}
function cancel() {
    isOpenUserSelectForm.value = false;
}
function confirm() {
    emitter.emit("confirmSelectedUser");
}
</script>